<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <layout>
        <template v-slot:header>
            <div style="display: flex;justify-content: space-between">
                <h1>XXXX平台</h1>
                <span>
                <a href="#">登录</a>
                <a href="#">注册</a>
            </span>
            </div>
        </template>
        <template v-slot:footer>
            <div style="text-align: center">yc公司</div>
        </template>

        <template v-slot:main>
            <message type="error" title="系统错误" msg="网站崩溃!">
                <a href="#">网站崩溃!</a>
            </message>
            <message title="系统提示" msg="明天放假">
                <button>明天放假</button>
            </message>
        </template>
    </layout>
</div>
<script>
    Vue.component("message", {
        props: ["“type", "title", "msg"],
        template: `
          <div style="padding: 10px" :style="{backgroundcolor: getBg()}">
            <b style="padding-right: 10px; margin-right:10px;
        border-right: 1px #aaa solid">{{title}}</b>
            <slot>
              <span>{{msg}}</span>
            </slot>
          </div>
        `,
        methods: {
            getBg() {
                if (this.type ==='error') {
                    return "red";
                } else {
                    return "green";
                }
            }
        }
    })

    Vue.component("layout", {
        template: `
            <div>
            <header style="background-color: #eee; padding: 10px">
            <slot name="header">页头</slot>
            </header>
            <main style="background-color: #ddd; padding: 10px; height: 400px">
            <slot name="main">内容区</slot>
            </main>
            <footer style="background-color: #ccc; padding:10px">
            <slot name="footer">页脚</slot>
            </footer>
            </div>
        `
    })

    var v = new Vue({
        el: "#app",
    })


</script>

</layout>
</body>
</html>